<!-- 艺人-详情 -->
<template>
	<view class="info-box" :style="artistInfo.id === userInfo.artistId ? 'padding: 0': ''">
		<view class="info-box-t">
			<!-- <image style="width: 100%;height: 100%;" :src="artistInfo.coverUrl"></image> -->
			<swiper class="swiper-box" style="height: 100%;border-radius: 0 0 40rpx 40rpx;overflow: hidden;" circular
				autoplay :duration="1000" indicator-dots :interval="5000">
				<swiper-item v-for="(item,index) in swiperListData" :key="index" @click="clickImg(index)"
					style="border-radius: 0 0 40rpx 40rpx">
					<video class="video" v-if="artistInfo.videoUrl && index === 0" :src="item"
						style="width: 100%;height: 100%;border-radius: 0 0 40rpx 40rpx;">
					</video>
					<image v-else mode="aspectFit" style="width: 100%;height: 100%;border-radius: 0 0 40rpx 40rpx;"
						:src="item.picUrl">
					</image>
				</swiper-item>
			</swiper>
			<l-barrage ref="lBarrage" @end="handleEnd()"></l-barrage>
			<view class="tag-box">
				<text v-if="artistInfo.age">{{`${artistInfo.age}岁`}}</text>
				<text v-if="artistInfo.height">{{`${artistInfo.height}cm`}}</text>
				<text v-if="artistInfo.weight">{{`${artistInfo.weight}kg`}}</text>
			</view>
		</view>
		<view class="info-box-b">
			<view class="title-box">
				<view class="title-box-l">
					<view class="name">
						<text>{{artistInfo.stageName}}</text>
						<view>
							<image src="/static/images/locationIcon.png"></image>
							<text>{{artistInfo.cityName}}</text>
						</view>
					</view>
					<view class="briefIntroduction">{{artistInfo.signature}}</view>
				</view>
				<view class="title-box-r">
					<view class="box">
						<image src="/static/images/scoreIcon.png"></image>
						<text>{{`评分 ${artistInfo.evaluateLevel || '5.0'}`}}</text>
					</view>
					<view class="box" @tap="handleFollow" v-if="artistInfo.id !== userInfo.artistId">
						<image v-if="artistInfo.isFollow" src="/static/images/followIcon2.png"></image>
						<image v-else src="/static/images/followIcon.png"></image>
						<text>{{ artistInfo.isFollow ? '取消关注' : '关注Ta'}}</text>
					</view>
				</view>
			</view>
			<view class="quality-box">
				<view class="box">
					<text class="box-l">服务</text>
					<!-- 					<view class="">
						{{artistInfo.serviceStatus === 0 ? '忙碌' : artistInfo.serviceStatus === 1 ? '休息中': '空闲'}}
					</view> -->
					<view v-if="artistInfo.serviceStatus !== 1">
						<view v-if="isInInterval == '1'">
							<image src="/static/images/fastNew.png" style="width: 156rpx;height: 46rpx;"></image>
						</view>
						<view class="info-tag-img" v-else>
							<text class="info-tag-img-text">最早可约{{artistInfo.serviceStartTime.substr(0,5)}}</text>
						</view>
					</view>
					<view v-else>
						<!-- <image src="/static/images/bizNew.png
							style="width: 156rpx;height: 46rpx;"></image> -->
						<view class="info-tag-text">
							休息中
						</view>

					</view>
				</view>
				<view class="box" v-if="artistInfo.qualificationsVos.length">
					<text class="box-l">资质</text>
					<view class="box-r j-s" @tap="isShowQualificationsVos = !isShowQualificationsVos">
						<text>{{'全资格认证'}}</text>
						<image v-if="!isShowQualificationsVos" src="/static/images/rightIcon.png"
							style="width: 16rpx;height: 16rpx;"></image>
						<image v-else src="/static/images/xiaIcon.png" style="width: 16rpx;height: 16rpx;"></image>
					</view>
				</view>
				<view class="x-b" v-if="isShowQualificationsVos">
					<text>{{artistInfo.qualificationsVos.map(i => i.qualificationsName).join('/')}}</text>
				</View>
				<view class="box" v-if="artistInfo.guaranteeVos.length">
					<text class="box-l">保障</text>

					<view class="box-r j-s" @tap="isShowGuaranteeVos = !isShowGuaranteeVos">
						<text>{{'平台保障'}}</text>
						<image v-if="!isShowGuaranteeVos" src="/static/images/rightIcon.png"
							style="width: 16rpx;height: 16rpx;"></image>
						<image v-else src="/static/images/xiaIcon.png" style="width: 16rpx;height: 16rpx;"></image>
					</view>
				</view>
				<view class="x-b" v-if="isShowGuaranteeVos">
					<text>{{artistInfo.guaranteeVos.map(i => i.guaranteeName).join('/')}}</text>
				</View>
			</view>
			<view class="tag-box">
				<text class="title">服务项目</text>
				<view class="box uni-flex uni-row">
					<checkbox-group v-for="(item,index) in artistInfo.cates" :key="index" class="flex-item"
						:class="checkCateIndex == index || cateId == item.id ? 'box-1' : 'box-11'"
						@click="changeColor(index,item.id)">
						<view class="text1">{{item.title}}</view>
						<view class="text2">{{parseInt(item.price) + '/' + item.unit}}</view>
					</checkbox-group>
				</view>
			</view>

			<view class="description-box">
				<text class="title">购买须知</text>
				<rich-text class="description-detail" :nodes="descriptionOfBox"></rich-text>
			</view>
		</view>
		<view class="submitButton-box"
			v-if="isxxxx && artistInfo.id !== userInfo.artistId && artistInfo.serviceStatus!==1">

			<view class="submit-box" @tap="handleSubmit()">
				立即预约
			</view>

			<!-- H5平台 -->
			<!-- #ifdef H5 || APP-ANDROID	 -->
			<uni-link :href="hrefUrl" :showUnderLine="false">
				<view class="submitButton-box-left">
					<uni-icons custom-prefix="iconfont2" type="icon-kefu" size="30"></uni-icons>
					<text class="submitButton-box-left-text">在线咨询</text>
				</view>
			</uni-link>
			<!-- #endif -->

			<!-- 微信小程序平台 -->
			<!-- #ifdef MP-WEIXIN -->
			<button class="submitButton-box-left2" open-type="contact" @bindcontact="handleContact">
				<uni-icons custom-prefix="iconfont2" type="icon-kefu" size="30"
					style="line-height: 0; height: 30px;"></uni-icons>
				<text class="submitButton-box-left-text">在线咨询</text>
			</button>
			<!-- #endif -->

		</view>


		<xphoto ref="xphoto_ref" active="red" :circular="true"></xphoto>
		<categoryTip ref="categoryTipRef"></categoryTip>
		<previewImage ref="previewImageRef" :imgs="imgs" :saveBtn="false" :descs="[]" :circular="true"></previewImage>
	</view>
</template>

<script>
	// 公共方法
	import cookie from '@/utils/cookie.js'
	import {
		wxShare
	} from '@/utils/wx/wxPublick-h5.js'

	// 引入api请求
	import {
		postArtistDetail,
		postUserFollower,
	} from '@/api/artist.js'

	// 页面组件
	import lBarrage from './components/l-barrage/l-barrage.vue'
	import xphoto from './components/ovsexia-xphoto/xphoto.vue'
	import categoryTip from './components/categoryTip/categoryTip.vue'
	import previewImage from './components/kxj-previewImage/kxj-previewImage.vue';

	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	export default {
		name: 'info',
		components: {
			lBarrage,
			xphoto,
			categoryTip,
			previewImage
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin']),
			...mapState({
				hrefUrl: state => state.user.hrefUrl
			})
		},
		data() {
			return {
				id: '',
				cateId: '',
				isInInterval: '',
				isShowQualificationsVos: false,
				isShowGuaranteeVos: false,
				isxxxx: false,
				imgs: [],
				artistInfo: {
					age: '',
					height: '',
					weight: '',
					stageName: '',
					cityName: '',
					signature: '',
					evaluateLevel: '',
					qualificationsVos: [],
					guaranteeVos: [],
					cates: [],
					isFollow: false,
					serviceStartTime: ''
				},
				serviceStatusOptions: [{
						label: '空闲',
						value: 2,
						type: 'success'
					},
					{
						label: '休息',
						value: 1,
						type: 'warning'
					},
					{
						label: '忙碌',
						value: 0,
						type: 'danger'
					}
				],
				descriptionOfBox: [{
						name: 'div',
						attrs: {
							class: 'description-detail',
							// style: 'line-height: 32px; color: #3C4766; text-align:left;'
						},
						children: [{
							type: 'text',
							text: '· 本公司仅提供线下文娱交友活动，对于违法行为和要求，DD友伴有权拒绝服务，并保留法律诉讼的权利。'
						}]
					},
					{
						name: 'div',
						attrs: {
							class: 'description-detail',
						},
						children: [{
							type: 'text',
							text: '· 服务进行地址应是公共场合，非隐秘场所如酒店私人住宅。'
						}]
					},
					{
						name: 'div',
						attrs: {
							class: 'description-detail',
						},
						children: [{
							type: 'text',
							text: '· DD友伴没有接单，客户取消订单，全额退款。'
						}]
					}, {
						name: 'div',
						attrs: {
							class: 'description-detail',
						},
						children: [{
							type: 'text',
							text: '· 服务开始前，因客户原因提前终止服务，扣除项目费用30%，交通费不予退还。'
						}]
					}, {
						name: 'div',
						attrs: {
							class: 'description-detail',
						},
						children: [{
							type: 'text',
							text: '· 客户下单需收取DD友伴出行双向交通费用（1公里内免出行费）谢谢您的支持与理解。'
						}]
					},

				],
				checkCateIndex: null,
				// checkCateId: null

				shareData: {
					title: '', // 分享标题
					desc: '', // 分享描述
					link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: '', // 分享图标
				},
				
				swiperListData: [], // 切换的

			};
		},
		async onLoad({
			id,
			isInInterval,
			cateId
		}) {
			// if (!id) {
			// 	uni.showToast({
			duration: 5000,
			// 		title: '页面请求异常请重新进入',
			// 		icon: 'none'
			// 	})
			// 	uni.navigateBack()
			// 	return
			// }
			this.id = id
			this.cateId = cateId
			this.isInInterval = isInInterval
			await this.handleInit()
			// this.descriptionInfo()

			// 分享链接
			this.shareData.link =
			`${this.$baseURL+'#'}/pages/artist/info?id=${id}&isInInterval=${isInInterval}${cateId ? `cateId=${cateId}` : ''}`

			// #ifdef H5
			// 设置分享
			wxShare(this.shareData)
			//#endif

		},

		methods: {

			handleContact(e) {},



			changeColor(index, cateId) {
				this.cateId = cateId;
				this.checkCateIndex = index;
			},
			handleCateId(e) {
				const {
					id: cateId,
					description,
					title,
					picUrl
				} = e
				this.$refs.categoryTipRef.open({
					description,
					cateId,
					title,
					picUrl
				})
			},
			handleEnd() {
				this.$nextTick(() => {
					this.$refs.lBarrage.start(this.artistInfo.evaluateVos.filter(i => i.description).map(i => i
						.description));
				})
			},
			clickImg(index) {
				if (this.artistInfo.videoUrl && index === 0) {
				
				} else {
					this.$refs.previewImageRef.open(index)
				}
			},
			async handleInit() {
				try {
					uni.showLoading({
						title: '正在加载中'
					});
					const res = await postArtistDetail({
						id: this.id,
						pageNum: 1,
						pageSize: 20
					})
					const {
						code,
						data: artistInfo
					} = res
					if (res.code !== 200) {
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: res.msg || '获取艺人详情信息失败'
						})
					}

					//分享的数据
					this.shareData.title = res.data.stageName
					this.shareData.desc = res.data.signature
					this.shareData.imgUrl = res.data.coverUrl

					this.isxxxx = true
					this.artistInfo = artistInfo
					
					// swiper的数据
					this.swiperListData = [...artistInfo.photoVos]
					if (artistInfo.videoUrl) {
						this.swiperListData.unshift(artistInfo.videoUrl)
					}
					
					this.imgs = this.artistInfo.photoVos.map(i => i.picUrl)
					this.handleEnd()

				} catch ({
					message: title = '获取艺人详情信息失败'
				}) {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
				} finally {
					uni.hideLoading();
				}
			},

			/**
			 * 点击关注
			 */
			async handleFollow() {
				if (!this.isLogin) {
					uni.switchTab({
						url: '/pages/my/index'
					})
					return
				}
				const {
					isFollow,
					id: artistId
				} = this.artistInfo
				const {
					id: userId
				} = this.userInfo

				try {
					await postUserFollower({
						userId,
						artistId
					}).then(res => {
						if (res.code !== 200) {
							return uni.showToast({
								duration: 5000,
								icon: 'none',
								title: res.msg
							})
						}
						uni.showToast({
							duration: 5000,
							icon: 'none',
							title: '操作成功'
						})
						this.handleInit()
					})
				} catch ({
					message: title = '关注失败'
				}) {
					uni.showToast({
						duration: 5000,
						icon: 'none',
						title
					})
				}
			},
			handleSubmit() {
				// 打个锚点
				if (!this.isLogin) {
					uni.switchTab({
						url: '/pages/myTab/index'
					})
					return
				}
				if (!this.cateId) {
					uni.showToast({
						duration: 1000,
						icon: 'none',
						title: '请选择下单项目'
					})
					return
				}

				// if (!this.userInfo.isCertification) {
				// 	const that = this
				// 	uni.showModal({
				// 		title: '应国家法律要求请先实名认证',
				// 		confirmText: '立即前往',
				// 		showCancel: false,
				// 		success: function(res) {
				// 			if (res.confirm) {
				// 				that.handleTo('/artist/pages/certification')
				// 			} else if (res.cancel) {}
				// 		}
				// 	});
				// 	return
				// }
				cookie.set('placeOrder', 1)
				this.handleTo(
					`/pages/order/placeOrder?artistId=${this.id}${this.cateId? `&categoryId=${this.cateId}` : ''}`)
			},
			handleTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.info-box {
		display: flex;
		flex-direction: column;
		padding-bottom: 40rpx;
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
		min-height: 100vh;

		.info-box-t {
			height: 800rpx;
			border-radius: 0px 0px 40rpx 40rpx;
			position: relative;

			.tag-box {
				position: absolute;
				display: flex;
				left: 32rpx;
				bottom: 32rpx;

				text {
					color: #FDF3F3;
					font-size: 24rpx;
					padding: 0 10rpx;
					height: 34rpx;
					line-height: 34rpx;
					border-radius: 17rpx;
					margin-right: 8rpx;

					&:nth-child(1) {
						background: rgba(236, 96, 111, 0.8);
					}

					&:nth-child(2) {
						background: rgba(245, 139, 41, 0.8);
					}

					&:nth-child(3) {
						background: rgba(113, 98, 234, 0.8);
						margin-right: 0;
					}
				}
			}
		}

		.info-box-b {
			display: flex;
			flex-direction: column;
			padding: 0 32rpx;

			.title-box {
				padding: 32rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

				.title-box-l {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-right: 24rpx;

					.name {
						display: flex;
						align-items: center;

						&>text {
							margin-right: 16rpx;
							color: #0F0D21;
							font-size: 40rpx;
							font-weight: bold;
						}

						&>view {
							height: 34rpx;
							line-height: 34rpx;
							padding: 0 16rpx;
							border-radius: 8rpx;
							background: rgba(236, 96, 111, 0.15);
							color: #EC606F;
							font-size: 18rpx;

							&>image {
								width: 16rpx;
								height: 16rpx;
								margin-right: 4rpx;
							}
						}
					}

					.briefIntroduction {
						color: #8C8A8A;
						font-size: 24rpx;

					}
				}

				.title-box-r {
					display: flex;
					align-items: flex-start;

					.box {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-right: 32rpx;

						&>text {
							color: #0F0D21;
							font-size: 18rpx;
							margin-top: 4rpx;
							white-space: nowrap;
						}

						&>image {
							width: 70rpx;
							height: 70rpx;
						}

						&:last-child {
							margin: 0;
						}
					}
				}
			}

			.quality-box {
				display: flex;
				flex-direction: column;
				padding: 16rpx 0;
				border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);

				.box {
					display: flex;
					align-content: center;
					padding: 16rpx 0;
					font-size: 28rpx;

					&-l {
						color: #8C8A8A;
						width: 120rpx;
					}

					&-r {
						color: #0F0D21;
						flex: 1;
					}

					.j-s {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.color2 {
						color: #26605C;
						position: absolute;
						left: 165rpx;
						margin-top: 5rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: normal;
						line-height: 38rpx;
						letter-spacing: 0em;
					}

					.color1 {
						color: #EC606F;
					}

					.color0 {
						color: #F58B29;
					}
				}
			}

			.x-b {
				display: flex;
				flex-direction: column;
				padding-left: 120rpx;
				font-size: 24rpx;
				color: #8C8A8A;
			}

			.description-box {
				margin-top: 32rpx;
				padding-top: 32rpx;
				border-top: 2rpx solid rgba(0, 0, 0, 0.1);

				.title {
					color: #0F0D21;
					font-size: 28rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 16rpx;
				}

				.description-detail {
					opacity: 1;
					color: #3C4766;
					font-size: 24rpx;
					line-height: 45rpx;
					letter-spacing: 0rpx;
					text-align: left;
					display: -webkit-box;
					overflow: hidden;

				}
			}

			.tag-box {
				margin-top: 32rpx;

				.title {
					color: #0F0D21;
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
				}

				.uni-row {
					flex-direction: row;
				}

				.uni-flex {
					display: flex;
					flex-direction: row;
				}

				.uni-column {
					flex-direction: column;
				}

				.flex-item {
					width: 40%;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 24rpx;
					border-radius: 10rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					border: 2rpx solid;
					font-size: 24rpx;
				}

				.text1 {
					float: left;
					display: inline-block;
				}

				.text2 {
					float: right;
					display: inline-block;
				}

				.box {
					margin-top: 16rpx;
					display: flex;
					flex-wrap: wrap;
					margin-bottom: -16rpx;

					.box-text {
						height: 50rpx;
						line-height: 50rpx;
						padding: 0 24rpx;
						border-radius: 10rpx;
						margin-right: 16rpx;
						margin-bottom: 16rpx;
						border: 2rpx solid;
						font-size: 18rpx;
					}


					.box-1 {
						color: #EC606F;
						border-color: #EC606F;
						background: url(/static/images/cateCheck.png) no-repeat top left;
						background-size: 30rpx 15rpx;
					}

					.box-11 {
						border-color: #8C8A8A;
						color: #0F0D21;
					}

					.box-2 {
						color: #84CF61;
						border-color: #84CF61;
					}

					.box-3 {
						background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						border-color: #E27C8A;
						// border-image: linear-gradient(180deg, rgba(226, 124, 138, 1), rgba(246, 199, 127, 1), rgba(245, 139, 41, 1)) 2 2;
					}

					.box-4 {
						background: linear-gradient(180deg, #A580D4 0%, #7162EA 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						border-color: #A580D4;
						// border-image: linear-gradient(180deg, rgba(226, 124, 138, 1), rgba(246, 199, 127, 1), rgba(245, 139, 41, 1)) 2 2;
					}

					.box-5 {
						background: linear-gradient(180deg, #E27CB3 0%, #C81073 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						border-color: #E27CB3;
						// border-image: linear-gradient(180deg, rgba(226, 124, 138, 1), rgba(246, 199, 127, 1), rgba(245, 139, 41, 1)) 2 2;
					}

					.box-6 {
						background: linear-gradient(180deg, #E27CB3 0%, #C81073 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						border-color: #E27CB3;
						// border-image: linear-gradient(180deg, rgba(226, 124, 138, 1), rgba(246, 199, 127, 1), rgba(245, 139, 41, 1)) 2 2;
					}

					.box-7 {
						background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						border-color: #E27C8A;
						// border-image: linear-gradient(180deg, rgba(226, 124, 138, 1), rgba(246, 199, 127, 1), rgba(245, 139, 41, 1)) 2 2;
					}
				}
			}
		}

		.submitButton-box {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			background-color: #fff;
			box-sizing: border-box;
			padding: 24rpx;
			box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);


			.submitButton-box-left {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 92rpx;


				.submitButton-box-left-text {
					color: #999;
					font-size: 28rpx;
				}
			}

			.submitButton-box-left2 {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 120rpx;
				height: 92rpx;
				padding: 0 !important;
				overflow: visible;
				background-color: rgba(#fff, 0);


				.submitButton-box-left-text {
					color: #999;
					font-size: 28rpx;
					line-height: 0;
				}

				&::after {
					border: none;
					background-color: rgba(#fff, 0);
					border-radius: 0;
				}

				&:hover {
					background-color: rgba(#fff, 0);
				}
			}


			.submit-box {
				flex: 1;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #FDF3F3;
				font-size: 36rpx;
				background: linear-gradient(180deg, #E27C8A 0%, #EC606F 100%);
				border-radius: 44rpx;
			}



		}

		&::after {
			display: block;
			content: '';
			height: 88rpx;
			margin-top: 40rpx;
		}

	}

	::v-deep .uni-swiper-wrapper {

		.uni-swiper-dots {
			bottom: 32rpx;
			right: 32rpx;
			transform: none;
		}

		.uni-swiper-dot-active {
			background-color: #fff !important;
		}

		.uni-swiper-dot {
			width: 16rpx;
			height: 16rpx;
			background: rgba(255, 255, 255, 0.4);
		}
	}


	.info-tag-text {
		padding: 0 16rpx;
		height: 34rpx;
		line-height: 34rpx;
		color: #FDF3F3;
		font-size: 18rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		color: #999;
		background: #E5E5E5;
	}

	.info-tag-img {
		height: 24px;
		border-radius: 336px;
		background: linear-gradient(90deg, #75BE9D 0%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0.5) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 24rpx;

		.info-tag-img-text {
			font-size: 24rpx;
			color: #458C6C;

		}
	}
</style>
<style>
	page,
	uni-page {
		background: none;
	}
</style>